<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="format-detection" content="telephone=no">
    <meta content="yes" name="apple-touch-fullscreen">
    <meta name="keywords" content="小说,小说网,玄幻小说,武侠小说,都市小说,历史小说,网络小说,言情小说,青春小说,原创网络文学">
    <meta name="description" content="小说阅读,精彩小说尽在起点中文网. 起点中文网提供玄幻小说,武侠小说,原创小说,网游小说,都市小说,言情小说,青春小说,历史小说,军事小说,网游小说,科幻小说,恐怖小说,首发小说,最新章节免费">
    <link rel="shortcut icon" href="/images/favicon.0.2.ico">
    <title>上传头像_起点中文网</title>
    <link rel="stylesheet" href="/dist/frozen/css/frozen.css">
    <link rel="stylesheet" href="/css/sprite.css">
    <link rel="stylesheet" href="/css/common.css">
    <link rel="stylesheet" href="/css/index.css">
    <link rel="stylesheet" href="/css/my.css">
    <link rel="stylesheet" href="/dist/update/css/style.css">
    <% include head.ejs%>
    <style>

    </style>
</head>
<body>
<div class="page page-bookshelft-my">
    <div class="content">
        <header id="header" class="header" data-l1="41">
            <a href="/user/info" class="header-back jsBack" data-eid="mqd_G14">
                <i class="icon"></i>
            </a>
            <h1 class="header-back-title" id="title">上传头像</h1>
        </header>
        <div>
            <div class="lazy_tip" id="lazy_tip"></div>
            <div class="resource_lazy hide"></div>
            <div class="pic_edit">
                <h4>双指旋转和双指缩放</h4>
                <div id="clipArea"></div>
                <div style="margin-top:10px;">
                    <button class="ui-btn ui-btn-primary" id="upload2">选择图片</button>
                    <button class="ui-btn ui-btn-primary" id="clipBtn">上传图片</button>
                </div>
                <input type="file" id="file" style="opacity: 0;position: fixed;bottom: -100px">
                <div id="plan" style="display:none">
                    <div style="margin:10px auto;">比例剪切后尺寸</div>
                    <canvas id="myCanvas"></canvas>
                    <div onClick="Close();" class="ui-btn ui-btn-primary" style="width:60px;margin:0 auto;display:block;clear:left;">关闭</div>
                </div>
            </div>
            <img src="" fileName="" id="hit" style="display:none;z-index: 9">

            <div id="cover"></div>
        </div>
    </div>
</div>
</body>
<script src="/dist/update/js/sonic.js"></script>
<script src="/dist/update/js/comm.js"></script>
<script src="/dist/update/js/hammer.js"></script>
<script src="/dist/update/js/iscroll-zoom.js"></script>
<script src="/dist/update/js/jquery.photoClip.js?v=1"></script>
<script>
    var hammer = '';
    var currentIndex = 0;
    var body_width = _$('body').width();
    var body_height = _$('body').height();

    _$("#clipArea").photoClip({
        width: body_width * 0.8125,
        height: body_width * 0.8125,
        file: "#file",
        view: "#hit",
        ok: "#clipBtn",
        loadStart: function () {
            //console.log("照片读取中");
            _$('.lazy_tip span').text('');
            _$('.lazy_tip').show();
        },
        loadComplete: function () {
            //console.log("照片读取完成");
            _$('.lazy_tip').hide();
        },
        clipFinish: function (dataURL) {
            _$('#hit').attr('src', dataURL);
            saveImageInfo();
        }
    });

    //图片上传
    function saveImageInfo() {
        var filename = _$('#hit').attr('fileName');
        var img_data = _$('#hit').attr('src');
        if(img_data==""){alert('null');}
        //alert(filename+'|'+img_data);
        render(img_data);

        _$.post("/updateHeadImg", {image: img_data}, function (data) {
            if(data['code']==1) {
                tip(data.msg);
                console.log(data.imgurl);
            }else{
                tip(data.msg);
            }
        });
    }

    /*获取文件拓展名*/
    function getFileExt(str) {
        var d = /\.[^\.]+$/.exec(str);
        return d;
    }

    //图片上传结束
    _$(function () {
        _$('#upload2').on('click', function () {
            //图片上传按钮
            _$('#file').click();
        });
    })


    function Close(){
        _$('#plan').hide();
        location.href='/user/info';
    }

    // 渲染 Image 缩放尺寸
    function render(src){
        var MAX_HEIGHT = 256;  //Image 缩放尺寸
        // 创建一个 Image 对象
        var image = new Image();

        // 绑定 load 事件处理器，加载完成后执行
        image.onload = function(){
            // 获取 canvas DOM 对象
            var canvas = document.getElementById("myCanvas");
            // 如果高度超标
            if(image.height > MAX_HEIGHT) {
                // 宽度等比例缩放 *=
                image.width *= MAX_HEIGHT / image.height;
                image.height = MAX_HEIGHT;
            }
            // 获取 canvas的 2d 环境对象,
            // 可以理解Context是管理员，canvas是房子
            var ctx = canvas.getContext("2d");
            // canvas清屏
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            canvas.width = image.width;        // 重置canvas宽高
            canvas.height = image.height;
            // 将图像绘制到canvas上
            ctx.drawImage(image, 0, 0, image.width, image.height);
            // !!! 注意，image 没有加入到 dom之中

            var dataurl = canvas.toDataURL("image/jpeg");
            var imagedata =  encodeURIComponent(dataurl);
            _$('#plan').attr('data-src',dataurl);
            _$('#plan').show();
        };
        // 设置src属性，浏览器会自动加载。
        // 记住必须先绑定render()事件，才能设置src属性，否则会出同步问题。
        image.src = src;
    };
</script>
</html>